<template>
    <transition
            enter-active-class="animated fadeIn"
            leave-active-class="animated fadeOut"
    >
    <div class="tags" v-if="show">
        <!--<div class="elem-quote">{{hotTag}}</div>-->
        <!--<hr>-->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{{tag}}</span>
                <el-button style="float: right; padding: 5px 10px" type="primary" @click="fresh()" :loading="refresh">{{btn}}</el-button>
            </div>
            <el-tag
                    v-for="tag in tags"
                    :key="tag.name"
                    :type="tag.type"
            >
                {{tag.name}}
            </el-tag>
        </el-card>
    </div>
        </transition>
</template>

<script>
    import {log,buildParams} from '@/assets/js/util.js'
    export default{
        name: 'tags',
        data () {
            return {
                color:['','success','info','warning','danger'],
                tags: [],
                msg: 'tags',
                refresh:false,
                btn:'刷新',
                show:false,
                hotTag:'热门标签',
                tag:'标签',
            }
        },
        methods:{
            fresh:function () {
                this.btn = '加载中'
                this.refresh = true
                this.init('fresh')
            },
            init:function (type) {
                this.$http.jsonp(server_url+'/api/tags', {}, {
                    headers: {
                    },
                    emulateJSON: true
                }).then(function(response) {
                    this.tags = response.data.data
                    for(var i = 0;i < this.tags.length;i++){
                        this.tags[i].type = this.color[parseInt(Math.random()*10)]
                    }
                    this.btn = '刷新'
                    this.refresh = false
                    if(type == 'init'){
                        this.show = true
                    }
                }, function(response) {
                    log(response)
                    this.btn = '刷新'
                    this.refresh = false
                });
            },
        },
        mounted: function() {
            this.init('init')
//            this.$nextTick(function () {})
        }

    }
</script>

<style>
    .el-tag{
        margin-left:10px;
        margin-top: 5px;
    }
    .tags{
        margin-top: 10px;
    }
</style>